import { SearchBar, NoticeBar } from "antd-mobile";
import { useRef, useEffect, useState } from "react";
import { loadGoodsAPI } from "../../services/goods";
import { useNavigate } from "react-router-dom";
import { dalImg } from "../../utils/tools";

function SearchDetail() {
  const inputRef = useRef(null);
  //搜索商品数据
  const [data, setData] = useState([]);

  const nav = useNavigate();
  useEffect(() => {
    inputRef.current.focus(); // 组件加载时让输入框自动获取焦点
  }, []);
  useEffect(() => {
    loadGoodsAPI(1, "", 1000).then((res) => {
      setData(res.data.list);
    });
  }, []);

  return (
    <div className="search-detail">
      <NoticeBar
        style={{
          backgroundColor: "#9e9e9e4d",
        }}
        content="寻医找药不用忙，好大夫来帮你忙。留住健康，一“点”不难。"
        color="alert"
      />
      <div
        className="search"
        style={{
          overflow: "hidden",
          height: "50px",
          backgroundColor: "#ffc0cb5e",
        }}
      >
        <SearchBar
          ref={inputRef}
          onSearch={async (v) => {
            // console.log(v);
            const res = await loadGoodsAPI(1, v, 1000);
            // console.log(res.data.list);
            setData(res.data.list);
          }}
          style={{ margin: "8px 16px" }}
          placeholder="请输入搜索药品"
        />
      </div>
      <h3
        style={{
          textAlign: "center",
          padding: "10px 0",
          fontWeight: "normal",
          fontSize: "20px",
          color: "red",
          boxShadow: "#ffd70059 0px -2px 1px 0px inset",
        }}
      >
        云药房
      </h3>
      <div className="goods-list">
        {data.map((item) => (
          <div
            className="good"
            key={item.id}
            onClick={() => {
              nav("/goods/" + item.id);
            }}
          >
            <img
              width="120px"
              height="120px"
              src={dalImg(item.image)}
              alt="图丢了"
            />
            <p>{item.name}</p>
          </div>
        ))}
      </div>
    </div>
  );
}

export default SearchDetail;
